<template>
   <!-- 数据查询栏位置 -->
    <!-- ref可以用来定位找到form标签，方便后续操作 -->
     <div class="demo-card">
        <t-card title="护理项目搜索栏" bordered=false hover-shadow>
            <t-form
                  :data="formData"
                  labelWidth="calc(5em + 30px)"
                  layout='inline'
                  ref="form"
                  @reset="onReset"
                  @submit="onSubmit"
              >
              <t-form-item label="项目护理名称" name="name">
                <t-input v-model="formData.name" placeholder="请输入"></t-input>
              </t-form-item>
              <t-form-item label="状态" name="status">
                      <t-tree-select
                            v-model="formData.status"
                             filterable
                            :data="statusOptions"
                             placeholder="请选择项目状态"
                      ></t-tree-select>
              </t-form-item>
               <t-form-item style="margin-left: 50px">
                  <t-button theme="primary" type="submit"  @click="MessagePlugin('success', '用户表示操作顺利达成')">搜索</t-button>
                  <t-button theme="default" variant="base" type="reset">重置</t-button>
                  <t-button theme="primary" @click="newappear">新建</t-button>
               </t-form-item>
          </t-form>
        </t-card>
    </div>

    <!-- 这里是新建对话框的内容 -->
     <t-dialog
      header="新建项目"
      :visible.sync="visible"
      width="40%"
      confirmOnEnter=true
      :onConfirm="appear"
      :onCancel="disappear"
      :onEscKeydown="disappear"
      :onCloseBtnClick="disappear"
    >
      <t-space direction="vertical" style="width: 500px">
           <t-form
                  :data="addformData"
                  :rules="myrules"
                  labelWidth="calc(5em + 30px)"
                  layout='inline'
                  ref="pandasrules"
                  @reset="onReset"
                  @submit="myinnerSubmit"
              >
              <t-space direction="vertical" style="width: 500px">
              <t-form-item label="项目护理名称" name="name">
                <t-input v-model="addformData.name" placeholder="请输入"></t-input>
              </t-form-item>
              <t-form-item label="价格" name="price">
                <t-input v-model="addformData.price" type="number"></t-input>      
              </t-form-item>
              <t-form-item label="单位" name="unit">
                <t-input v-model="addformData.unit" placeholder="请输入"></t-input>      
              </t-form-item>
               <t-form-item label="排序" name="orderNo">
                <t-input v-model="addformData.orderNo" type="number"></t-input>      
              </t-form-item>
              <t-form-item label="状态" name="status">
                  <t-radio-group v-model="addformData.status">
                    <t-radio value=1>启用</t-radio>
                    <t-radio value=0>禁用</t-radio>
                  </t-radio-group>
              </t-form-item>
              <t-form-item label="图片" name="image">
                      <!-- 图片位置开始 -->
                           <t-upload
                              ref="uploadRef1"
                              action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
                              v-model="file1"
                              :disabled="disabled"
                              :autoUpload="autoUpload"
                              :showImageFileName="showImageFileName"
                              :sizeLimit="sizeLimit"
                              theme="image"
                              tips="请选择单张图片文件上传,图片大小不超过2M"
                              accept="image/*"
                              @fail="handleFail"
                            >
                           </t-upload>
                      <!-- 图片位置结束 -->
              </t-form-item>
              <t-form-item label="护理项目描述" help="请输入" name="nursingRequirement">
                <t-textarea v-model="addformData.nursingRequirement" placeholder="请输入"></t-textarea>
             </t-form-item>
              </t-space>
          </t-form>
      </t-space>
    </t-dialog>
    <!-- 增加一个div盒子 让搜索栏和列表数据有一定的距离 -->
   <div style="height: 10px;"></div>
   <!-- 数据表格的位置 -->
   <t-table
      :data="data"
      :columns="columns"
      stripe=true
      bordered=true
      hover=true
      size="medium"
      table-layout="true ? 'auto' : 'fixed'"
      :pagination="pagination"
      showHeader=true
      cellEmptyContent="-"
    >
    <!-- <template #rowIndex = "{rowIndex}">
      
      {{rowIndex + 1}}

    </template>
     -->

     <template #image = "{row}">
          <t-image
        :src="row.image"
        fit="fill"
        :style="{ width: '120px', height: '120px' }"
      />
     </template>
     <template #createTime = "{row}">
        {{updatatime(row.createTime)}}
     </template>

     <template #status = "{row}">
      <t-tag theme="success" v-if="row.status == 1" style="justify-content: center; margin-left: 30px;">启动</t-tag>

      <t-tag theme="danger"  v-if="row.status == 0" style="justify-content: center; margin-left: 30px;">禁用</t-tag>
     </template>
     <template #op = "{row}">
         <t-space>
          <t-button variant="outline" theme="danger" ghost>删除</t-button>
          <t-button variant="outline" theme="primary" ghost>编辑</t-button>
          <t-button variant="outline" theme="danger" ghost v-if="row.status == 1">禁用</t-button>
          <t-button variant="outline" theme="primary"  ghost v-if="row.status ==0">启用</t-button>
         </t-space>
     </template>
    </t-table>
</template>



<script   lang='jsx' setup>
  import {ref,onMounted} from 'vue'
  import  columns from './tableheader.ts'
  import { getnursingprojectList } from '@/api/nursingproject_api.js';
  import dayjs from 'dayjs'
  import { MessagePlugin } from 'tdesign-vue-next';
import { status } from 'nprogress';

// 设置新建项目数据
  const pandasrules = ref()
  const visible = ref(false)
  const appear = ()=>{
    console.log("这里是对话框按钮触发的提交")
    console.log(pandasrules.value)
    pandasrules.value.submit()
    visible.value = true
  }

  // 1
  const myinnerSubmit = ({ validateResult, firstError }) => {
    if(addformData.value.orderNo<0){
      alert("输入的排序要大于0且为整数")
      return
    }
    console.log("触发了内表的触发")
  if (validateResult === true) {
    MessagePlugin.success('提交成功');
  } else {
    console.log('Errors: ', validateResult);
    MessagePlugin.warning(firstError);
  }
};
  // 1
  const disappear = ()=>{
    console.log("事情2")
    visible.value = false
  }
    const newappear = ()=>{
    visible.value = true
  }
  // 设置表单校验数据
    const myrules = ref({
       name: [
          {
            required: true,
            message: '姓名必填',
            type: 'error',
            trigger: 'blur',
          },
          // trigger 默认为 'change'
          {
            required: true,
            message: '姓名必填',
            type: 'error',
          },
       ],
      price:[
         {
            required: true,
            message: '价格必填',
            type: 'error',
            trigger: 'blur',
          },
          // trigger 默认为 'change'
          {
            required: true,
            message: '价格必填',
            type: 'error',
          },
      ]
    })
  const addformData = ref({
    name:"",
    price:0,
    unit:"",
    orderNo:1,
    status:1,
    image:"",
    nursingRequirement:"",
  })
  // 显示分页数据
  const pagination = ref({
  current:0,
  pageSize:0,
  defaultCurrent: 1,
  defaultPageSize: 10,
  total:10
});

const updatatime = (time)=>{
   return dayjs(time).format('YYYY/MM/DD')
}

//定义搜索栏的数据
 const formData = ref({
    name:"",
    status: -1,
 })

 //这是搜索栏，状态栏的选项配置
 const statusOptions = ref([
  {label: '请选择项目状态',value: -1},
  {label: '启用',value: 1},
  {label: '禁用',value: 0}
]);

// 定义data数据
 const data = ref([])

// 制作表头,列元素
// 已被抽取到tableheader.ts

// 请求data数据
onMounted(()=>{
  initlist()
})

// 初始化界面

const initlist =async (parms)=>{
      const lsit = await getnursingprojectList(parms)
      data.value = lsit. records
      pagination.value.current = lsit.page
      pagination.value.pageSize = lsit.pageSize
      pagination.value.total = lsit.total
}


const onSubmit =()=>{
  console.log(formData.value)
   initlist(formData.value)
}



</script>
